<template>
  <div>
    <el-cascader
      :style="{'width':item.width?item.width+'px':'200px'}"
      v-model="modelData"
      :options="cascaderData"
      :disabled="formData.id && item.disabled"
      @change="cascaderChange"
      :props="item.props"
      :placeholder="item.placeholder || '请选择省/市/县区'"
      clearable
    ></el-cascader>
  </div>
</template>

<script>
export default {
  name: "cascaderpart",
  props: {
    formData: {
      type: Object,
      default() {
        return {};
      }
    },
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    vModel: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      cascaderData: [],
      modelData: []
    };
  },
  created() {
    this.getCascaderOption();
  },
  watch: {
    vModel(newValue) {
      if (newValue) {
        this.modelData = this.vModel;
      }
    }
  },
  methods: {
    getCascaderOption() {
      this.item
        .optionsUrl()
        .then(({ data }) => {
          this.cascaderData = data.data.list;
        })
        .catch();
    },
    cascaderChange() {
      if (this.modelData.length > 0) {
        this.$emit("cascaderChange", this.modelData);
      }
    }
  }
};
</script>
<style scoped>
</style>
